<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>report</title>
  <style>
    canvas {
      background: #ddd;
    }
  </style>
</head>
<body>
<canvas id="canvas"></canvas>
<canvas id="xc"></canvas>
<script>
  var W = 360
  var H = 640

  var canvas = document.getElementById('canvas')
  var context = canvas.getContext('2d')

  canvas.width = W + 10
  canvas.height = H + 20

  context.moveTo(0, 0)
  context.lineTo(W + 10, 0)
  context.lineTo(W + 10, H + 20)
  context.lineTo(0, H + 20)
  context.lineTo(0, 0)
  context.lineTo(W + 10, H + 20)
  context.stroke()

  var xc = document.getElementById('xc')
  var ctx = xc.getContext('2d')

  xc.width = H
  xc.height = W

  function rotate() {
    ctx.rotate(-Math.PI/2);
    ctx.translate(-W, 0)
    ctx.drawImage(canvas, 0, 0, canvas.width, canvas.height, 0, 0, W, H)
  }

  rotate()
</script>
</body>
</html>